<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 过滤选择器</title>
    <script type="text/javascript" src="/static/js3/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
    <style type="text/css"> .selected {
        background-color: gray;
    }</style>
    <script>
        $(function () {
            console.log($('ul li:first').html());
            console.log($('ul li:first-child').size());
            console.log($('ul li:last'));
            console.log($('ul li:last-child'));
            $('tbody>tr:odd').css('background-color','green');
            console.log($('li:odd'));
            console.log($('ul li:nth-child(2n)'));
            console.log($('input[id^=check]'));
        })
    </script>
</head>
<body>
<div id="check">使用ID选择器获取当前DIV元素</div>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<ul>
    <li>item21</li>
    <li>item22</li>
    <li>item23</li>
    <li>item24</li>
</ul>

<table border="1">
    <thead>
    <tr>
        <td></td>
        <td>编号</td>
        <td>姓名</td>
        <td>邮件</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" id="acheck1"/></td>
        <td>1</td>
        <td>张无忌</td>
        <td>wujizhang@163.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="bcheck2"/></td>
        <td>2</td>
        <td>郭靖</td>
        <td>jinguo@163.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check3"/></td>
        <td>3</td>
        <td>黄蓉</td>
        <td>ronghuang@163.com</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="check4"/></td>
        <td>4</td>
        <td>赵敏</td>
        <td>minzhao@163.com</td>
    </tr>
    </tbody>
</table>

<hr/>
<div>
    <p>
        问题1:获取ul的第一个li元素(:first)

    </p>
    <p>
        问题2:获取每一个ul的第一个li元素(:first-child)

    </p>
    <p>
        问题3:获取ul的最后一个li元素(:last)

    </p>
    <p>
        问题4:获取每一个ul的最后一个li元素(:last-child)

    </p>
    <p>
        问题5:表格隔行变色

    </p>
    <p>
        问题6:获取所有的奇/偶数的li元素(:odd/:even)

    </p>
    <p>
        问题7:获取每个ul的奇/偶数的li元素(:nth-child(?))

    </p>
    <p>
        问题8:获取input元素中id以check开头的元素([attr^=value])

    </p>
</div>
</body>
</html>